<template>
  <div class="nav">
    <div class="nav-job">
      <RouterLink to="/dingdanView"><div><</div></RouterLink>
      <div class="p">评价</div>
      <div>提交</div>
    </div>
    <div class="shangpin">
      <van-card
        num="1"
        price="108"
        title="直发 ecostore/ecostore 椰子香草沐浴露400m"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
      />
    </div>
    <div class="wenzi">
      <div>分享本次购物体验，2～256字</div>
    </div>
    <div class="pai">
      <van-grid :gutter="10">
        <van-grid-item
          v-for="value in 1"
          :key="value"
          icon="photo-o"
          text="添加照片"
        />
      </van-grid>
    </div>
    <div class="xuanxiang">
      <div>
        <van-radio-group v-model="checked" shape="square">
          <van-radio name="1"></van-radio>
        </van-radio-group>
      </div>
      <div>匿名</div>
      <div>您的评价可以帮助其他小伙伴哟！</div>
    </div>
    <div class="pingfen">
        <div>评分</div>
        <div><van-rate color="#ffd21e" v-model="value" :count="5" /></div>
    </div>
  </div>
</template>
<style scoped>
.nav-job {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #ccc;
}
.p {
  color: #09b674;
}
.wenzi {
  padding: 10px;
  color: #989494;
}
.pai {
  margin-top: 70px;
  padding: 10px 0;
  border-bottom: 1px solid #f4f4f4;
}
.xuanxiang {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    color: #8a8585;
}
.xuanxiang div:nth-child(2){
    margin-right: 30px;
}
.pingfen {
    display: flex;
    padding: 20px 10px;
    justify-content: space-between;
}
</style>
<script setup>
import { ref } from 'vue';

    const checked = ref('1');
    const value = ref(2.5);
</script>
